
<template>
  <div>
    <section class="content">
      <div class="column">
        <div id="bar" style="width:100%;height:500px;"  ></div>

        <div id="line"  style="width:100%;height:500px;"></div>
        <div id="rose"  style="width:100%;height:500px;"></div>
        <div id="ring"  style="width:100%;height:500px;"></div>
        <div id="radar" style="width:100%;height:500px;"></div>
      </div>
      <div class="column">
        <div id="scatter"  style="width:100%;height:500px;"></div>
        <div id="bubble"  style="width:100%;height:500px;"></div>
        <div id="heat"  style="width:100%;height:500px;"></div>
        <div id="stack"  style="width:100%;height:500px;"></div>
      </div>
    </section>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import db from '@/server/sql.js';

// 构建图表
export default {
  name: "Echartstwo",
  mounted() {
    this.bar();
    this.line();
    this.pie();
    this.ringpie();
    this.sca();
    this.bubble();
    this.hot();
    this.radar();
    this.stackBar();
  },
  methods: {
    bar() {
      // const sql2 ="SELECT * FROM `test01`.`sheet1` WHERE `酒店直销拒单率` <> 'NULL' AND `酒店直销拒单率` <> '0' ORDER BY  `省份`,`城市`,`城市直销拒单率` DESC limit 5";
      //   var testlist = [];
      //   db.connect(sql2,function(error,data){
      //     if(error){console.log(error)}
      //     console.log( typeof data,'data',data);         
      //   });
      //   console.log(testlist);
      let barChart = echarts.init(document.getElementById("bar"));
      var option = {
        title: { text: "柱状图 ",color:'red',textStyle:{ fontSize: '16px',fontStyle:'italic',fontWeight:'bolder' } },
        legend: {},//显示内容为series里的name项的值
        tooltip: { //个体数据提示框
          // extraCssText: 'width: 50px;',//提示框style样式
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: [{}
          //坐标系调整
          // { bottom: "10%" }, //从底部收缩10%
          // {height:"95%"}
        ],
        xAxis: [
          {
            data: [
              "衬衫\n副商品a",
              "羊毛衫\n副商品a",
              "雪纺衫\n副商品a",
              "裤子\n副商品a",
              "高跟鞋\n副商品a",
              "袜子\n副商品a",
            ],
            type: "category",
            name: "x轴标签",
          },
          {
            data: ["a", "b", "c", "d", "f", "e"],
            type: "category",
            // name:'x轴上轴'1
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "轴标签a",
          },
          {
            type: "value",
            name: "轴标签b",
          },
        ],
        series: [
          {
            name: '商品',
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name:'系列B',
            type: "bar",
            data: [3, 45, 12, 13, 10, 20],
          }
        ]
      };
      barChart.setOption(option);
    },

    line() {
      let linePic = echarts.init(document.getElementById("line"));
      var option = {
        title: { text: "折线图",
        text: "折线图", /*主标题*/
        subtext: "标题靠左\n垂直居顶\n\n主标题:\n红色\n加粗斜体\n20像素\n\n副标题:\n加粗\n14像素", /*副标题*/
        left: "left",
        top: "top",
        textStyle:{ /*主标题*/
            fontSize: 20,//数值或 '20px'带单位的字符串
            color:'red',
            fontWeight:'bold',
            fontStyle:'italic'
          },
        subtextStyle: { /*副标题*/
            fontSize: '15px',
            fontWeight:'bolder'
          }, 
        },
        legend: {},
        tooltip: {
          // extraCssText: 'width: 170px;height:100px;',
          trigger: "axis",
        },
        grid: {'left':'15%'},
        xAxis: [
          {
            data: [
              "衬衫  副商品a",
              "羊毛衫  副商品a",
              "雪纺衫   副商品a",
              "裤子  副商品a",
              "高跟鞋  副商品a",
              "袜子  副商品a",
            ],
            type: "category",
            name: "x轴标签",
          },
          {
            data: ["a", "b", "c", "d", "f", "e"],
            type: "category",
            name: "\n\nx轴标签2",
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "轴标签a",
          },
          {
            type: "value",
            name: "轴标签b",
          },
        ],
        series: [
          {
            name: "销量",
            type: "line",
            data: ['56546.20', '14545.10', '36345.10', '10453.20', '10534.50', '20241.10'],
          },
          {
            type: "line",
            data: [30000, 45000, 12000, 13000, 10000, 20000],
          }
        ]
      };
      linePic.setOption(option);
    },

    pie() {
      let piePic = echarts.init(document.getElementById("rose"));
      var option = {
        title: { text: "玫瑰饼图" },
        legend: {},
        tooltip: {
          // formatter:'{a}<br/>{b}:{c}({d}%)'
        },
        grid: {},
        series: [
          {
            name: "销量",
            type: "pie",
            roseType: "radius", //南丁格尔图
            // radius:['50%','75%'] ,//双半径
            data: [
              // { value:50,name:'aa'},
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
              // [735,"Direct"],
              // [580,"Email"],
              // [484,'Union Ads'],
              // [300,"Video Ads"]

            ]}
        ]
      };
      piePic.setOption(option);
    },

    ringpie() {
      let ringPic = echarts.init(document.getElementById("ring"));
      var option = {
        title: { text: "双环饼图" },
        legend: {},
        tooltip: {},
        grid: {},
        series: [
          {
            name: "销量",
            type: "pie",
            
            radius:['50%','75%'] ,//双半径
            data: [
              // { value:50,name:'aa'},
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ]}
        ]
      };
      ringPic.setOption(option);
    },

    sca() {
      let scaPic = echarts.init(document.getElementById("scatter"));
      var option = {
        title: { text: "散点" },
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          extraCssText: "width: 170px",
        },
        tooltip: {},

        dataset: {
          source: [
            { value: 16, value2: 30 },
            { value: 23, value2: 49 },
            { value: 40, value2: 48 },
            { value: 12, value2: 35 },
            { value: 45, value2: 12 },
            { value: 28, value2: 38 },
          ],
        },
        grid: {},
        xAxis: {
          type: "value",
          scale: true,
        },

        yAxis: {
          type: "value",
          scale: true,
        },
        series: [
          {
            name:'数据分布',
            type: "scatter",
          }
        ]
      };
      scaPic.setOption(option);
    },
    bubble() {
      let bubblePic = echarts.init(document.getElementById("bubble"));
      var option = {
        title: { text: "气泡图" },
        legend: {},
        tooltip: {},
        grid: {},
        dataset: {
          source: [
            { value: 16, value2: 30, size: 10 ,name:'a城' },
            { value: 23, value2: 49, size: 4 ,name:'b城' },
            { value: 40, value2: 48, size: 5 ,name:'c城'},
            { value: 12, value2: 35, size: 4 ,name:'d城'},
            { value: 45, value2: 12, size: 8 ,name:'e城'},
            { value: 28, value2: 38, size: 3 ,name:'f城'},
          ],
        },
        xAxis: {
          type: "value",
          name:'value',
          scale: true,
        },

        yAxis: {
          type: "value",
          name:'value2',
          scale: true,
        },
        series: {
          type: "scatter",
          name:'城市位置及人口',
          symbolSize: function (arg) {
            // console.log(arg);
            // arg字典形式

            var res = arg.size * 5;
            return res;
          }}
      };
      bubblePic.setOption(option)
    },

    hot(){
      let hotmapPic = echarts.init(document.getElementById('heat'));
      const hours = [  /*小时数据系列*/
            '12a', '1a','2a'
      ];
      const days = [ /*日期系列*/
          'Saturday', 'Friday'
      ];
      var option = {
          title: { text: '热力图' },
          legend: {},
          tooltip: {},
          grid:{},
          dataset:{
            source: [[0,0,5],[0,1,1],[2,0,3],[1, 0, 2],[1,1,1]] //x轴坐标，y轴坐标，z轴坐标
          },
          xAxis: {
          type: 'category',

          data: hours
          },
          yAxis: {
          type: 'category',
          data: days
          },
          visualMap: {
          min: 0,
          max: 10,
          calculable: true,/*显示范围值*/
          left: 'center',/*居中*/
          orient: 'horizontal',/*热力度参考条水平分布*/
          bottom: '-10'/*下边距*/
          },
          series: 
          {
              name: '地区',
              type: 'heatmap',
              data: [[0,0,5],[0,1,1],[2,0,3],[1, 0, 2],[1,1,1]],
              label: {
              show: true  /*显示数值*/
              }
          }
      };
      hotmapPic.setOption(option);
    },

    radar(){
      var item1 ={Sales:58,value2:168,value3:168,value4:168,value5:168,value6:168,title:'item1'};
      var item2 ={Sales:78,value2:28,value3:178,value4:138,value5:138,value6:78,title:'item2'};
      var thedata = [item1,item2];
      let radarPic = echarts.init(document.getElementById("radar"));
      var option = {
        title:{text:'雷达图'},
        legend: {},
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            },
            extraCssText: 'width: 170px'
        },

        grid:[
            // {bottom:61},
            // {height:60,
            //     bottom:0}
        ],
        radar: {
        // shape: 'circle',
          indicator: [
              { name: 'Sales', max: 200 },
              { name: 'Administration', max: 200 },
              { name: 'Information Technology', max: 200 },
              { name: 'Customer Support', max: 200 },
              { name: 'Development', max: 200 },
              { name: 'Marketing', max: 200 }
          ]
        },
        dataset:{
        source: thedata},
        series:[
            {
                name:'value',
                type:'radar'
            }
        ]
      };
      radarPic.setOption(option);
    },

    stackBar(){
      var stack = echarts.init(document.getElementById('stack'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'line',
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Email',
            type: 'line',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'line',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: 'series'
            },
            markLine: {
              lineStyle: {
                type: 'dashed'
              },
              data: [[{ type: 'min' }, { type: 'max' }]]
            }
          },
          {
            name: 'Baidu',
            type: 'line',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: 'Google',
            type: 'line',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: 'Bing',
            type: 'line',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: 'Others',
            type: 'line',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      };
      stack.setOption(option);
    },
    
    lineRe(){
      var lineSca = echarts.init(document.querySelector("#linerRe"));
      var regr = ecStat.regression('linear',linepoint,{dimensions:[0,1]});
      var option = {
        title:{
          text:'散点',
          left:'40%',
          textStyle:{
            fontSize:20
          },
          subtext:'+线性回归',
          subtextStyle:{
            fontSize:30,
            color:'red',
            fontWeight:'bolder',
            fontStyle:'italic'
          }
        },
        legend: {},
        tooltip: {
          trigger: "item",
          axisPointer: {
              type: "shadow"
            },
          position: function (pos, params, el, elRect, size) {
            var obj = {top: 10};
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            return obj;
          },
          extraCssText: 'width: 170px'
        },
        grid:[
          {bottom:61},
          {height:60,
          bottom:0}
        ],
        dataset:[
          {
            source: scadata
            
          }
          // ,{
          //   transform: {
          // 	type: 'ecStat:regression'
          // 	// 'linear' by default.
          // 	// config: { method: 'linear', formulaOn: 'end'}
          //   }
          // }
          ],
        xAxis:{
          type:'value',
          scale:true
        },

        yAxis:{
          type:'value'
          ,scale:true
        },
        series:[
          {
            symbolSize:10,
            type:'scatter',
            dimensions
          },
          {
            name: 'line',
            type: 'line',
            data:regr.points,
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: 'circle',
            label: { show: false,formatter: '{b}: {@deny}' },
            // labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 }
          }
        ]
      };
      lineSca.setOption(option);
    }
  },
};
</script>
<style >

.content{

  display: flex;
  /* min-width: 1024px; */
  /* max-width: 1920px; */
  
  margin: 0 auto;
  /* flex-direction: row; */
  
}
.column{
  flex: 2;
    
  }

</style>